<!--
 * @Description: 缺陷数量
 * @Author: Huang Junjie
 * @Date: 2021-06-01 17:31:17
 * @LastEditTime: 2021-07-15 17:42:43
 * @LastEditors: Liu Zhiwang
-->
<template>
  <div class="number-of-defects-style">
    <div class="component-inner-div">
      <!-- 四角样式 -->
      <div class="the-four-border the-four-border-01" />
      <div class="the-four-border the-four-border-02" />
      <div class="the-four-border the-four-border-03" />
      <div class="the-four-border the-four-border-04" />
      <!-- 四角样式 -->

      <!-- 标题栏 -->
      <div class="title">
        <div class="point-icon" />
        <span>接触网缺陷数量 TOP5</span>
      </div>
      <!-- 标题栏 -->

      <!-- 缺陷数量图表 -->
      <!-- <div
        id="ColumnChart01"
        class="echart01" /> -->
      <!-- 缺陷数量图表 -->

      <!-- 接触网缺陷数量漏斗图 -->
      <div
        id="funnelChart01"
        class="echart01" />
      <!-- 接触网缺陷数量漏斗图 -->
    </div>
  </div>
</template>

<script>
import { getjcwNumberOfDefectsDataList, getDefectStat } from '@/api/jjxt/production-safety/segment-level-home'
import { funnelChart01 } from './common/js/EchartsModel'

// 引入echarts
const echarts = require('echarts')

export default {
  mounted() {
    this.getDefectStat() // 查询接触网缺陷数量排名列表
    // this.getjcwNumberOfDefectsDataList() // 查询接触网缺陷数量排名列表
    // this.getColumnChart01() // 加载缺陷数量Echarts图表
    // this.getFunnelChart01() // 加载接触网缺陷数量Echarts图表
  },
  methods: {
    // 加载缺陷数量Echarts图表
    // getColumnChart01() {
    //   const xAxisArr = ['一级', '二级']
    //   const data = ['80', '90']
    //   const myChart = echarts.init(document.getElementById('ColumnChart01'))
    //   ColumnChart01(myChart, xAxisArr, data) // 缺陷数量 - 柱状图
    // },

    // 查询接触网缺陷数量排名列表(旧)
    getDefectStat() {
      getDefectStat().then(res => {
        const legend = [] // ['补偿', '补偿绳', '承锚角钢']
        const dataList = [] // [{ value: 0, name: ''}]
        const dataListStyle = [
          { color: '#5b8ff9', borderColor: '#5b8ff9' },
          { color: '#5ad8a6', borderColor: '#5ad8a6' },
          { color: '#5d7092', borderColor: '#5d7092' },
          { color: '#f6bd16', borderColor: '#f6bd16' },
          { color: '#e87c25', borderColor: '#e87c25' }
        ]
        if (res.data.length > 5) {
          for (let i = 0; i < 5; i++) {
            legend.push(res.data.name)
            dataList.push(res.data)
          }
        } else {
          res.data.forEach(val => {
            legend.push(val.name)
            dataList.push(val)
          })
        }
        dataList.forEach((val, key) => {
          val.value = val.num
          val.itemStyle = dataListStyle[key]
        })
        // dataList最终格式：[{ value: 0, name: '', itemStyle: { color: '#5b8ff9', borderColor: '#5b8ff9' } }]
        this.getFunnelChart01(legend, dataList) // 加载接触网缺陷数量Echarts图表
      })
    },

    // 查询接触网缺陷数量排名列表
    getjcwNumberOfDefectsDataList() {
      getjcwNumberOfDefectsDataList().then(res => {
        const legend = [] // ['补偿', '补偿绳', '承锚角钢']
        const dataList = [] // [{ value: 0, name: ''}]
        const dataListStyle = [
          { color: '#5b8ff9', borderColor: '#5b8ff9' },
          { color: '#5ad8a6', borderColor: '#5ad8a6' },
          { color: '#5d7092', borderColor: '#5d7092' },
          { color: '#f6bd16', borderColor: '#f6bd16' },
          { color: '#e87c25', borderColor: '#e87c25' }
        ]
        if (res.data.length > 5) {
          for (let i = 0; i < 5; i++) {
            legend.push(res.data.positionName)
            dataList.push(res.data)
          }
        } else {
          res.data.forEach(val => {
            legend.push(val.positionName)
            dataList.push(val)
          })
        }
        dataList.forEach((val, key) => {
          val.value = val.positionCount
          val.name = val.positionName
          val.itemStyle = dataListStyle[key]
        })
        // dataList最终格式：[{ value: 0, name: '', itemStyle: { color: '#5b8ff9', borderColor: '#5b8ff9' } }]
        this.getFunnelChart01(legend, dataList) // 加载接触网缺陷数量Echarts图表
      })
    },

    // 加载接触网缺陷数量Echarts图表
    getFunnelChart01(legend, data) {
      const myChart = echarts.init(document.getElementById('funnelChart01'))
      funnelChart01(myChart, legend, data) // 缺陷数量排名 - 漏斗图
    }
  }
}
</script>

<style lang="scss" scoped>
.number-of-defects-style {
  position: relative;
  color: white;
  height: 300px;
  width: 454px;
  box-sizing: border-box;
  overflow: hidden;
  .component-inner-div {
    border: 2px solid #122a57;
    height: 100%;
    background-color: rgba($color: #0a1944, $alpha: 0.9);
    box-sizing: border-box;
    .title {
      color: #3695FF;
      font-size: 20px;
      padding: 0;
      margin: 20px 16px 0 16px;
      padding-bottom: 16px;
      align-items: center;
      display: flex;
      border-bottom: 1px solid #0b62a3;
      .point-icon {
        background-color: #3695FF;
        height: 10px;
        width: 10px;
        margin: 0 10px 0 0;
      }
    }
    .echart01 {
      width: 436px;
      height: 217px;
      margin: 0 auto;
    }
  }
}
</style>
